<template>
  <div>
    <div class="div3">
      <div class="fontDiv div4">商品相册</div>
      <div class="div5"><el-button type="success" @click="showDialog">文件上传</el-button></div>
    </div>
    <el-scrollbar style="height:400px">
      <div style="width: 100%">
        <div class="div1" v-infinite-scroll="load">
          <div v-for="url in urls" class="div2">
            <el-card class="el-card">
              <el-image :key="url" :src="url.url"></el-image>
              <div>
                <el-button type="info" v-if="!url.mainPic" @click="GoodsPicSetMainPic(url.id)">设置为主图片</el-button>
                <el-button type="warning" @click="deleteGoodsPic(url.id)">删除</el-button>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </el-scrollbar>
    <el-dialog title="" :visible.sync="dialogTableVisible" style="text-align:center;">
      <el-upload
        :http-request="uploadImg"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-dialog>

    <div class="div9">
      <div class="fontDiv div4">商品详情</div>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%;margin-bottom: 200px;">
      <el-table-column
        prop="number"
        label="编号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        width="150">
      </el-table-column>
      <el-table-column
        prop="brandName"
        label="品牌"
        width="150">
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格"
        width="100">
      </el-table-column>
      <el-table-column
        prop="memberPrice"
        label="会员价格"
        width="150">
      </el-table-column>
      <el-table-column
        prop="articleNo"
        label="货号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="logistics"
        :formatter="formatRole1"
        label="物流"
        width="150">
      </el-table-column>
      <el-table-column
        prop="state"
        :formatter="formatRole2"
        label="商品状态"
        width="150">
      </el-table-column>
      <el-table-column
        prop="growth"
        label="成长值"
        width="150">
      </el-table-column>
      <el-table-column
        prop="integral"
        label="积分"
        width="150">
      </el-table-column>
      <el-table-column
        prop="guarantee"
        :formatter="formatRole3"
        label="服务保障"
        width="150">
      </el-table-column>
      <el-table-column
        prop="quota"
        :formatter="formatRole4"
        label="限购数"
        width="150">
      </el-table-column>
      <el-table-column
        prop="commentCount"
        label="评价数"
        width="150">
      </el-table-column>
      <el-table-column
        prop="buyCount"
        label="购买数"
        width="150">
      </el-table-column>
    </el-table>
  </div>


</template>

<script>
    import {goodsDetail,deleteGoodsPic,GoodsPicSetMainPic}  from "../../api/mallMG.js";
    export default {
      name: "GoodsDetail",
      data(){
        return{
          tableData:[],
          goodsId:this.$route.params.goodsId,
          dialogTableVisible:false,
          dialogImageUrl: '',
          dialogVisible: false,
          count: 10,
          urls: [

          ]
        }
      },
      mounted() {
        this.goodsDetail();
      },
      methods:{
        formatRole1:function(row,column){
          if(row.logistics==1){
            return "普通快递"
          }
          else if(row.logistics==2){
            return "国外直邮"
          }
          else if(row.logistics==3){
            return "门店自提"
          }
          return ""
        },
        formatRole2(row,column){
          if(row.state){
            return "已上架"
          }else{
            return "未上架"
          }
        },
        formatRole3(row,column){
          if(row.guarantee==1){
            return "七天无理由退货"
          }
          else if(row.guarantee==2){
            return "包邮"
          }
          else if(row.guarantee==3){
            return "包税"
          }
          return ""
        },
        formatRole4(row,column){
          if(row.quota==0){
            return '不限';
          }
          else if(row.quota>0){
            return row.quota+row.unit+"/每用户"
          }
          else{
            return  ''
          }
        },
        showDialog(){
          this.dialogTableVisible=!this.dialogTableVisible
        },
        /*回显*/
        goodsDetail(){
          goodsDetail({goodsId:this.goodsId}).then(res=>{
            //alert(JSON.stringify(res.data.data))
            let tagObject=res.data.data
            this.urls=tagObject.picList
            this.tableData=[]
            this.tableData.push(tagObject.mallGoodsDto)
          }).catch(error=>{
            alert(JSON.stringify(error))
          })
        },
        /*上传图片*/
        uploadImg(param){
          const formData = new FormData()
          formData.append('file', param.file)
          formData.append('goodsId',this.goodsId)
          //alert(formData)
          this.$axios.post("/management-mall/leyou.mall/mall-goods/uploadGoodsPic",formData,{
            'Content-type': 'multipart/form-data'
          }).then(res => {
            if(res.data.success){
              this.$message({
                message: '保存成功',
                type: 'success'
              });
              this.goodsDetail()
            }else{
              this.$message({
                message: '保存失败',
                type: 'error'
              });
            }

          })
        },
        /*删除图片*/
        deleteGoodsPic(id){
          deleteGoodsPic({id:id}).then(res=>{
            if(res.success){
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.goodsDetail();
            }else{
              this.$message({
                message: '删除失败',
                type: 'error'
              });
            }
          }).catch(error=>{
            alert(error)
          })
        },
        /*修改主图片*/
        GoodsPicSetMainPic(id){
          GoodsPicSetMainPic({id:id}).then(res=>{
            if(res.success){
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.goodsDetail();
            }else{
              this.$message({
                message: '修改成功',
                type: 'error'
              });
            }
          }).catch(error=>{
            alert(error)
          })
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        /*handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        cuol(res,file){
          alert(JSON.stringify(res))
          alert(JSON.stringify(file))
        },
        duil(res,file){
          alert(JSON.stringify(res))
          alert(JSON.stringify(file))
        }*/
      }
    }
</script>

<style scoped>
  .fontDiv{
    font-family: "Agency FB";
    font-size: 30px;
    margin: 10px;
  }
  .div1{
    height: 300px;
  }
  .div2{
    width: 400px;
    display: inline-block;
    margin: 5px;
  }
  .div3 div{
    display: inline-block;
  }
  .div4{
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .div5{
    margin-top: -10px;
    margin-bottom: 30px;
  }
  .el-card{
    width: 100%;
    height: 100%;
  }
  .div9{
    margin-top: 80px;

  }
</style>
